<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>Print Test</title>
    <style type="text/css">
        div#ctlDiv {
            height: 750px;
            width: 50%;
            float: left;
            border-style: solid;
            border-color: red;
            border-width: 0px;
        }

        div#pdfDiv {
            height: 750px;
            width: 49%;
            float: left;
            border-style: solid;
            border-color: red;
            border-width: 0px;
        }
    </style>
    <script type="text/javascript">
        var socket;

        window.onload = function load() {
            document.getElementById("pdfDiv").style.visibility = "hidden";
        }

        function setStatusLabel(msg) {
            var eStatus = document.getElementById("connectionStatus");
            eStatus.innerHTML = msg;
        }

        function doConnect(callback) {
            var serviceUrl = document.getElementById("serviceUrl").value;

            socket = new WebSocket(serviceUrl);

            // 监听消息
            socket.onmessage = function (event) {
                console.log('Client received a message', event);
                document.getElementById("pdfDiv").style.visibility = "hidden";
                // parse json
                var obj = eval('(' + event.data + ')');

                if (obj && (obj.previewURL || obj.previewImage)) {
                    var url;
                    if (obj && obj.previewURL) {
                        url = obj.previewURL;
                    } else if (obj && obj.previewImage) {
                        url = obj.previewImage;
                    }
                    var img = document.getElementById('img');
                    if (img) {
                        img.setAttribute('src', url);
                        document.getElementById("imgDiv").style.visibility = "visible";
                    }
                    // var pdf = document.getElementById('pdf');
                    // if (pdf) {
                    //     pdf.setAttribute('src', url);
                    //     document.getElementById("pdfDiv").style.visibility = "visible";
                    // }
                }
                var resultElement = document.getElementById("resultMessage");
                resultElement.value = resultElement.value + event.data + "\n";
                resultElement.scrollTop = resultElement.scrollHeight;
            };

            socket.onopen = function (event) {
                if (callback != null) {
                    callback();
                }
                setStatusLabel("已连接");
            }

            socket.onerror = function (error) {
                console.log("Failed to connect CN print at " + serviceUrl, error);
                setStatusLabel("连接错误");
            }

            // 监听Socket的关闭
            socket.onclose = function (event) {
                console.log('Client notified socket has closed', event);
                setStatusLabel("连接关闭");
            };
        }

        function sendCommand() {
            if (typeof socket == "undefined" || socket.readyState == WebSocket.CLOSED) {
                doConnect(sendCommand);
                return;
            }

            if (socket.readyState != WebSocket.OPEN) {
                alert("无效连接: " + socket.readyState);
                return;
            }

            var msg = document.getElementById('printmessage').value;
            var repeatCount = document.getElementById('repeatCount').value;
            var isPreview = document.getElementById('isPreview').checked;
            var time = new Date().getTime();

            for (var index = 0; index < repeatCount; index++) {
                var obj = JSON.parse(msg);

                if (obj["task"]) {
                    // taskID
                    obj["task"]["taskID"] = time.toString() + "_TASK_" + index;

                    // preview
                    obj["task"]["preview"] = isPreview;
                    obj["task"]["documents"][0]["contents"][0]["templateURL"] = 'http://192.168.1.11/print.html?v=' + time.toString()
                }

                var newMsg = JSON.stringify(obj);
                socket.send(newMsg);
            }
        }

        function clearResult() {
            var resultElement = document.getElementById("resultMessage");
            resultElement.value = "";
        }
    </script>


</head>
<body>

<div id="ctlDiv">

    <form name="formname" action="javascript:sendCommand()">
        <p>重复发送请求：<input id="repeatCount" type="number" min="1" max="1000" step="1" value="1">&nbsp;&nbsp;&nbsp;
            <input id="isPreview" type="checkbox" checked="true">预览模式
        </p>
        <p> 服务器: <input type="text" id="serviceUrl" name="serviceUrl" value="ws://localhost:13528"/>
            <label id="connectionStatus">未知</label>
            <input type="submit" value="发送请求"/>
        </p>
                <textarea cols="80" rows="20" id="printmessage" name="printmessage">
                    {"cmd":"print","requestID":"134","version":"1.0","task":{"taskID":"31","preview":false,"previewType": "image","notifyMode":"allInOne","documents":[{"documentID":"0123456789","contents":[{"data":{"issue_number":"01","total_postage": "6","merchant":{"mer_name":"阿亮帮帮2"},"create_time":"2023-11-16 14:41:02","product":[{"name":"兰州牛肉拉面+茶叶蛋+烤肠+饮品","num":"1","price":"25.0"},{"name":"新品苏香无骨烤鱼任选4配菜1米饭饮品(微辣)(要香菜)(包菜)(豆泡)(腐竹)(亲亲肠)","num":"2","price":"48.98"}],"pay_postage":"3.0","box_price":"4.7","coupon_price":"9.0","total_price":"120.8","real_name":"李瑞","reservation_time": "2023","user_phone":"13853131590", "mark": "需要餐具，不要辣椒，不要香菜葱花"},"signature":"19d6f7759487e556ddcdd3d499af087080403277b7deed1a951cc3d9a93c42a7e22ccba94ff609976c5d3ceb069b641f541bc9906098438d362cae002dfd823a8654b2b4f655e96317d7f60eef1372bb983a4e3174cc8d321668c49068071eaea873071ed683dd24810e51afc0bc925b7a2445fdbc2034cdffb12cb4719ca6b7","templateURL":"http:\/\/192.168.1.11\/print.html"}]}],"notifyType":["render","print"]}}
        	    </textarea>
<!--        <textarea cols="80" rows="20" id="printmessage" name="printmessage">-->
<!--                    {"cmd":"print","requestID":"134","version":"1.0","task":{"taskID":"31","preview":false,"previewType": "image","notifyMode":"allInOne","documents":[{"documentID":"wx461540660416086016","contents":[{"data":{"name":"海鹭家居","print_time":"2023-11-30 17:51:53","orderInfo":{"order_id":"wx461540660416086016","add_time":"1701326268","pay_time":"1701326268","pay_type":"yue","is_channel":"1","channel_type":"routine","status":"0","refund_status":"0","shipping_type":"1","real_name":"田先生","user_phone":"18976676233","user_address":"海南 海口市 龙华区 海垦街道 金都花园","gain_integral":"0.00","mark":"","total_price":"0.10","discount_price":"0","pay_postage":"0.00","deduction_price":"0.00","pay_price":"0.10"},"product":[{"name":"测试商品不发货","suk":"默认","bar_code":"","code":"","unit_price":"0.10","num":"1","price":"0.10"}]},"templateURL":"http:\/\/192.168.1.11\/print.html"}]}],"notifyType":["render","print"]}}-->
<!--        </textarea>-->
        <br/><br/>
        <textarea cols="80" rows="20" id="resultMessage" name="resultMessage" readonly="readonly"></textarea>
        <br/>
        <input type="button" value="清除返回消息" onclick="clearResult()"/>
    </form>
</div>

<div id="pdfDiv" align="middle">
    <iframe id="pdf" src="" width="100%" height="100%"></iframe>
</div>

<div id="imgDiv" align="middle"
     style="width: 964px;height: auto;position: absolute;top: 0;right: 500px;border: 1px solid #000000;" }>
    <img id="img" src="" alt="" width="100%" height="100%">
</div>

</body>
</html>
